<template>
    <view class="view">
        <span class="text">已报名活动</span>
        <div class="header">
            <div v-for="(item, index) in list" :key="index" v-if="list.length > 0" class="top" @click="xq_obj(item)">
                <image :src="item.img" mode="aspectFill" class="img">
                </image>
                <van-tag type="danger" size="large" round class="tab" v-if="item.state == '已结束'"
                    text-color="rgb(44, 45, 46)" color="rgb(132, 133, 134)">{{ item.state
                    }}</van-tag>
                <van-tag type="danger" size="large" round class="tab" v-if="item.state == '报名中'">{{ item.state
                }}</van-tag>
                <span style="font-weight: bold;">{{ item.title }} | {{ item.city }}</span><br>
                <span style="color: rgb(44, 45, 46);font-size: 14px;">活动时间： {{ item.opentime | date }}</span><br>
                <span style="color: rgb(44, 45, 46);font-size: 14px;">公里数： {{ item.km }}km</span><br>
                <span style="color: rgb(132, 133, 134);font-size: 14px;">活动地点： {{ item.address }}</span>
            </div>
        </div>
    </view>
</template>

<script>
export default {
    data() {
        return {
            baseAPI: "http://10.10.235.248:8088",
            list: []
        }
    },
    onShow() {
        this.getcjlist()
        this.checkAuth()
    },
    methods: {
        getcjlist() {
            this.request({
                url: "/my/activity/activity_bm_list",
                method: "get",
            }).then((res) => {
                this.list = res.data.data;
                console.log("报名数据", this.list);
            });
        },
        xq_obj(item) {
            console.log(item);
            uni.navigateTo({
                url: '/packone/activity_obj/index?obj=' + encodeURIComponent(JSON.stringify(item))
            })
        }
    }
}
</script>


<style scoped>
.text {
    border-bottom: 1px solid burlywood;
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    display: block;
    font-weight: bold;
}

.view {
    margin: 30rpx;
}

.header {
    width: 100%;
    margin: 30rpx 0;

}

.top {
    position: relative;
    margin-bottom: 40rpx;
}

.img {
    width: 100%;
    border-radius: 15px;
}

.tab {
    position: absolute;
    top: 10rpx;
    left: 20rpx;
}
</style>